<template>
  <div id="app">
    <div class="app">
      <h1>Hello World</h1>
      <h2>Hello Godz</h2>
      <h3>
        Hello HuaWei
        <br />
        Hello ChinaTelecom
      </h3>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;
  .app {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-image-source: radial-gradient(
      65% 65%,
      transparent 0px,
      transparent 100%,
      cyan 100%
    );
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(
      0deg,
      rgba(white, 0.1),
      rgba(white, 0.3),
      rgba(white, 0.1)
    );
    text-align: center;
  }
}
</style>
